<template>
  <div class="expansion" @click="isCollapse = !isCollapse">
    <el-icon><SwitchButton /></el-icon>
  </div>
  <el-menu
    :default-active="activeRouter"
    router
    :collapse="isCollapse"
    :collapse-transition="false"
    active-text-color="skyblue"
    background-color="#545c64"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
  >
    <MenuItem v-for="item in menuList" :key="item.path" :item="item" />
  </el-menu>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import MenuItem from "./MenuItem.vue"; 
import { useStore } from '@/store/user'
// import { watch } from "less";
const activeRouter=ref()
const currentRoute = useRoute();
const allState=useStore()
console.log('allState',allState.isCollapse);

// 写死的数据
const menuList = [
  { label: "管理", icon: "location", path: "/manager" },
  {
    label: "用户管理",
    icon: "location",
    path: "/user",
    children: [
      {
        label: "其它",
        icon: "location",
        path: "/other",
        children: [
          { label: "其它1", icon: "location", path: "/other" },
          { label: "其它2", icon: "location", path: "/otherOne" },
        ],
      },
    ],
  },


  { label: "测试", icon: "location", path: "/mock" },
];

const isCollapse = ref(false);
// 监听路由变化，当路由改变时更新activeRouter的值
watchEffect(() => {
  activeRouter.value = currentRoute.path;
});
watch(isCollapse, (newValue, oldValue) => {
  allState.isCollapse=newValue
  console.log('allState',allState.isCollapse);
})
// 处理菜单打开和关闭的事件
const handleOpen = (key, keyPath) => {
};

const handleClose = (key, keyPath) => {
  console.log("Closed:", key, keyPath);
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}
.el-menu.el-menu--vertical{
//  background:linear-gradient(to bottom, #00B4DB, #0083B0)
}

.expansion {
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: #bed2d7;
  cursor: pointer;
}
</style>
